<template>
  <div id="contact">
    <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
    <section>
      <div
        class="weui-cells_contact-head weui-cells weui-cells_access"
        style="margin-top: -1px"
      >
        <router-link to="/contact/new-friends" class="weui-cell">
            <div class="weui-cell_hd"> <img class="img-obj-cover"
                    src="../../assets/images/contact_top-friend-notify.png"> 
                    
                    </div>
            <div class="weui-cell_bd weui-cell_primary">
                <p>新的朋友
                  <van-badge v-if="newFriendNumber>0" :content="newFriendNumber"></van-badge>
                </p>
                
            </div>
        </router-link>

        <router-link to="/contact/group-list" class="weui-cell">
          <div class="weui-cell_hd">
            <img
              class="img-obj-cover"
              src="../../assets/images/contact_top-addgroup.png"
            />
          </div>
          <div class="weui-cell_bd weui-cell_primary">
            <p>
              <span>群聊</span> 
              <span></span> 
            </p>
          </div>
        </router-link>

        <router-link to="/contact/kefu-list" class="weui-cell">
          <div class="weui-cell_hd">
            <img
              class="img-obj-cover"
              src="../../assets/images/kefu.png"
            />
          </div>
          <div class="weui-cell_bd weui-cell_primary">
            <p>客服列表</p>
          </div>
        </router-link>

        <!-- <router-link to="/contact/tags" class="weui-cell">
                    <div class="weui-cell_hd"> <img class="img-obj-cover" src="../../assets/images/contact_top-tag.png">
                    </div>
                    <div class="weui-cell_bd weui-cell_primary">
                        <p>标签</p>
                    </div>
                </router-link>
                <router-link to="/contact/official-accounts" class="weui-cell">
                    <div class="weui-cell_hd"><img class="img-obj-cover"
                            src="../../assets/images/contact_top-offical.png"></div>
                    <div class="weui-cell_bd weui-cell_primary">
                        <p>公众号</p>
                    </div>
                </router-link> -->
      </div>
      <!--联系人集合-->
      <template v-for="(value, key) in contactsList">
        <!--首字母-->
        <div :ref="`key_${key}`" :key="key" class="weui-cells__title">
          {{ key }}
        </div>
        <div class="weui-cells" :key="key + 1">
          <!--查看好友信息 contact/details?wxid=1000063 -->
          <!--直接聊天 /wechat/dialogue?mid=1000063 -->
          <router-link
            :key="item.wxid"
            :to="{ path: '/contact/details', query: { wxid: item.mid } }"
            class="weui-cell weui-cell_access"
            v-for="item in value"
            tag="div"
          >
            <div class="weui-cell__hd">
              <img
                v-if="item.getClientMid"
                :src="item.getClientMid.headimg"
                class="home__mini-avatar___1nSrW"
              />
            </div>
            <div class="weui-cell__bd" v-if="item.getClientMid">
              {{ item.remark ? item.remark : item.getClientMid.nickname }}
            </div>
          </router-link>
        </div>
      </template>
    </section>
   
    <!--检索-->
    <div class="initial-bar">
      <span @click="toPs(i)" :key="i + 1" v-for="i in contactsInitialList">{{
        i
      }}</span>
    </div>

    <div class="FrinedEnd">{{ FriendNumber }}个朋友</div>
     </van-pull-refresh>
  </div>
</template>
<script>
import { ApiGetFriendList } from "@/api/api/main";
import { Badge  } from "vant";
import { PullRefresh } from "vant";

export default {
  mixins: [window.mixin],
    components: {
    [Badge .name]: Badge ,
        [PullRefresh.name]: PullRefresh,
  },
  data() {
    return {
      pageName: "通讯录",
      FriendNumber: 0,// 朋友列表
      GroupNumber:0,//群组列表
      refreshLoading:false,//下拉刷新
    };
  },
  mounted() {
    this.init();
  },
  activated() {
    //强制刷新
    if(this.$store.state.refreshView.contactStatus){
      this.init();
    }
  },

  computed: {
    // 动态计算首拼检索
    contactsInitialList() {
      return this.$store.getters.contactsInitialList;
    },
    contactsList() {
      return this.$store.getters.contactsList;
    },
    newFriendNumber(){
      return this.$store.state.newFriendNumber
    }
  },
  methods: {
    toPs(i) {
      window.scrollTo(0, this.$refs["key_" + i][0].offsetTop);
    },
    init() {
      ApiGetFriendList().then(({ data, msg }) => {
        this.refreshLoading = false
        // 设置好友列表
        this.$store.commit("setFriendList", data.friend);
        // 设置客服列表
        this.$store.commit("setData", {
          key:'kefuList',
          value: data.kefu
        });

        // 设置新好友申请数量
        this.$store.commit("setData", {
          key:'newFriendNumber',
          value: data.newFriendNumber
        });


        let FriendNumber = 0
        let GroupNumber = 0
        for(let i in data.friend){
          if(data.friend[i].type==1) FriendNumber++;
          if(data.friend[i].type==2) GroupNumber++;
        }
        this.FriendNumber = FriendNumber
        this.GroupNumber = GroupNumber
      });
    },
    onRefresh(){
      this.init();
    }
  },
};
</script>
<style lang="less">
@import "../../assets/less/contact.less";

#contact{
  min-height: calc(100% - 50px);
}
.FrinedEnd {
  margin: 20px 0px;
  text-align: center;
}
.van-pull-refresh{
  overflow: auto;
}
</style>